<template>
  <div class="layout">
      <transition
       
        :enter-active-class="`animate__animated animate__${dir_enter}`"
        :leave-active-class="`animate__animated animate__${dir_leave}`"
        >
    <router-view></router-view>
       </transition>
    <footer>
      <van-tabbar  v-model="active" active-color="#f03d37" inactive-color="#999">
        <van-tabbar-item name="/home/index" to="/home/index" icon="home-o">首页</van-tabbar-item>
        <van-tabbar-item name="/home/classify" to="/home/classify" icon="apps-o">分类</van-tabbar-item>
        <van-tabbar-item name="/home/cart" to="/home/cart" icon="shopping-cart-o">购物车</van-tabbar-item>
        <van-tabbar-item name="/home/profile" to="/home/profile" icon="van-icon van-icon-user-circle-o">我的</van-tabbar-item>
        
      </van-tabbar>
    </footer>
  </div>
</template>

<script>
import Vue from "vue";
import { Tabbar, TabbarItem, Icon } from "vant";

Vue.use(Tabbar);
Vue.use(Icon);
Vue.use(TabbarItem);
export default {

  data() {
    return {
      active: "/home/index",
      dir_enter:'',
      dir_leave:''
    };
  },
  watch:{
    $route(to,from){
      if(to.meta.num>from.meta.num){
        this.dir_enter = 'slideInRight'
        this.dir_leave = 'slideOutLeft'
      }else{
        this.dir_enter = 'slideInLeft'
        this.dir_leave = 'slideOutRight'
      }
    }
  },
  mounted(){
    this.active = this.$route.meta.path
  }
};
</script>

<style lang="stylus" scoped>
.animate__animated {
  --animate-duration: .2s;
}
div.layout 
  display flex
  flex-direction column
  height:100%
  position relative

:root {
  --animate-delay: 0.2s;
}
  footer 
    height 0.5rem
    overflow hidden

</style>